<template>
  <div class="bg-white fixed">
    <div
      class="header flex items-center justify-between"
      :class="auto ? 'width_1200_top' : 'width_1200'"
    >
      <div class="flex items-center" style="padding: 12px 0">
        <img
          src="https://static.huicanzhan.cn/common/sponsor/logo@2x.png"
          class="logo"
          @click="toHome"
        />
      </div>

      <div class="justify-self-end flex items-center">
        <div class="btn" :class="{ active: route.path == '/' }" @click="toHome">首页 </div>
        <n-dropdown trigger="hover" @select="handleSelect" :options="options">
          <div class="btn" :class="{ active: prodWhite.includes(route.path) }">产品及服务</div>
        </n-dropdown>
        <n-dropdown trigger="hover" @select="handleSelect" :options="optSolutions">
          <div
            class="btn"
            :class="{ active: route.path == '/onsite' || route.path == '/marketing' }"
          >
            解决方案
          </div>
        </n-dropdown>
        <div class="btn" :class="{ active: route.path == '/price' }" @click="toNext('/price')">
          价格
        </div>
        <div class="btn login" @click="toSponsor">登录/注册</div>
        <div @click="handleRelease" class="release">
          免费发布
          <img src="https://static.huicanzhan.cn/common/sponsor/fly.png" />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { useDialog, useMessage } from 'naive-ui';
  import { useRoute, useRouter } from 'vue-router';
  import { PageEnum } from '@/enums/pageEnum';

  const props = defineProps({
    showCity: {
      type: Boolean,
      default: true,
    },
    auto: {
      type: Boolean,
      default: false,
    },
  });

  const emit = defineEmits(['search']);

  const dialog = useDialog();
  const message = useMessage();
  const router = useRouter();
  const route = useRoute();

  // const prodWhite = ['/signin', '/parttime', '/exhibitor', '/exhibition', '/platform'];
  const prodWhite = ['/signin', '/exhibitor', '/exhibition'];

  const options = [
    {
      label: '活动报名',
      key: 1,
    },
    // {
    //   label: '兼职管理',
    //   key: 3,
    // },
    {
      label: '展商管理',
      key: 6,
    },
    {
      label: '会展CRM',
      key: 7,
    },
    // {
    //   label: '数字平台',
    //   key: 5,
    // },
  ];
  const optSolutions = [
    { label: '数智现场', key: 8 },
    { label: '数字营销', key: 9 },
  ];

  function toHome() {
    router.push(PageEnum.BASE_HOME);
  }
  function handleRelease() {
    window.open(import.meta.env.VITE_GLOB_SPONSOR_URL + '/register');
  }
  function toSponsor() {
    window.open(import.meta.env.VITE_GLOB_SPONSOR_URL + '/dashboard/console');
  }

  function toNext(url) {
    router.push(url);
  }

  function handleSelect(key) {
    switch (key) {
      case 1:
        router.push({ name: 'signin' });
        break;
      case 2:
        router.push({ name: 'exhibitorSystem' });
        break;
      // case 3:
      //   router.push({ name: 'parttime' });
      //   break;
      case 4:
        router.push({ name: 'marketing' });
        break;
      // case 5:
      //   router.push({ name: 'platform' });
      //   break;
      case 6:
        router.push({ name: 'exhibitor' });
        break;
      case 7:
        router.push({ name: 'crm' });
        break;
      case 8:
        router.push('/onsite');
        break;
      case 9:
        router.push('/marketing');
        break;
    }
  }

  onMounted(() => {});
</script>
<style lang="less" scoped>
  .fixed {
    top: 0;
    z-index: 15;
  }
  .bg-white {
    width: 100%;
    // border-bottom: 1px solid #f9f9f9;
  }

  .logo {
    height: 36px;
    cursor: pointer;
    margin-right: 200px;
  }
  .search-box {
    width: 430px;
    margin-left: 10px;
  }
  .btn {
    font-size: 14px;
    color: #191919;
    margin-right: 70px;
    font-weight: bold;
    &.active {
      color: #0e57d6;
    }
    &:hover {
      color: #0e57d6;
      cursor: pointer;
    }
    &:last-of-type {
      border: none;
      margin-left: 0;
    }
    &.login {
      margin: 0 50px;
      color: #0e57d6;
      font-weight: normal;
    }
  }
  .release {
    background-color: #0e57d6;
    padding: 0 40px;
    height: 60px;
    display: flex;
    align-items: center;
    color: #fff;
    cursor: pointer;
    img {
      width: 26px;
      height: 24px;
      margin-left: 20px;
    }
  }
  .flex-sub {
    flex: 1;
  }
  .width_1200_top {
    max-width: 1200px;
    // padding: 15px 0;
    margin: 0 auto;
    box-sizing: border-box;
  }
  @media screen and (min-width: 768px) and (max-width: 1200px) {
    .width_1200_top {
      flex-direction: column;
    }
  }
  @media (max-width: 767px) {
    .width_1200_top {
      flex-direction: column;
    }
  }
</style>
